<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--企业数据-->
            <el-col :span="24" :xs="24">

                <basic-search-form ref="vBasicSearchForm" :columns="columns" inline size="small" @search="serach"  label-width="100px">
                    <#list searchColumns as col>
                        <#if (col.type == 'select')>
                            <template #${col.name}="{ formdata }">
                                <el-select v-model="formdata.${col.name}" placeholder="${col.description}" clearable style="width:100%" filterable>
                                    <el-option v-for="item in ${col.name}List" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </template>
                        </#if>
                    </#list>
                </basic-search-form>

                <basic-table
                        ref="vBasicTable"
                        :api="${fetchApiMethod}"
                        :immediate-fetch="false"
                        :before-fetch="beforeFetch"
                        :table-schema="tableSchema"
                        :actions="tableActions"
                        :table-prop="tableProp"
                        :table-event="tableEvent"
                        :row-info="{ rowKey: 'data' }"
                >
                    <#list searchColumns as col>
                        <#if (col.type == 'authStatusTag')>
                            <!-- 0-未认证,1-已认证,2-审核中,3-认证失败 -->
                            <template #${col.name}="{ row }">
                                <div display="flex" align-items="center">
                                    <div>
                                        <el-tag type="info" v-if="row.${col.name} == 0">{{ row.${col.name}Str }}</el-tag>
                                        <el-tag type="success" v-if="row.${col.name} == 1">{{ row.${col.name}Str }}</el-tag>
                                        <el-tag type="warning" v-if="row.${col.name} == 2">{{ row.${col.name}Str }}</el-tag>
                                        <el-tag type="danger" v-if="row.${col.name} == 3">{{ row.${col.name}Str }}</el-tag>
                                        <el-button size="mini" type="text" @click="handle${col.name}(row)" style="margin-left:10px;">
                                            {{row.${col.name} === 0 ? '发起认证' : '编辑认证'}}
                                        </el-button>
                                    </div>
                                </div>
                            </template>
                        <#elseif (col.type == 'statusTag')>
                            <template #${col.name}="{ row }">
                                <div style="text-align:center">
                                    <el-tag type="info" v-if="row.${col.name} == 0">{{ row.${col.name}Str }}</el-tag>
                                    <el-tag type="success" v-if="row.${col.name} == 1">{{ row.${col.name}Str }}</el-tag>
                                </div>
                            </template>
                        <#elseif (col.type == 'avatarGroup')>
                            <template #${col.name}="{ row }">
                                <div style="display: flex; align-items: center">
                                    <div style="margin-right:10px;">
                                        <img style="width:30px;height:30px;border-radius:50%;"
                                             :src="row.${col.nameArray[0]} || require('@/assets/images/profile.jpg')" />
                                    </div>
                                    <div>
                                        <div>{{ row.${col.nameArray[1]} }}</div>
                                        <div>{{ row.${col.nameArray[2]} }}</div>
                                    </div>
                                </div>
                            </template>
                        </#if>
                    </#list>

                    <!-- 表格上方按钮-->
                    <template #tableHead="{ total }">
                        <div>企业统计：{{ total }}</div>
                        <div style="height: 32px">
                            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">创建新企业</el-button>
                            <el-button type="info" plain icon="el-icon-upload2" size="mini" :disabled="selecteds.length === 0" @click="handleBatchStatusChange(1)">批量禁用</el-button>
                            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="selecteds.length === 0" @click="handleBatchStatusChange(0)">批量恢复</el-button>
                            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
                        </div>
                    </template>
                </basic-table>

            </el-col>
        </el-row>

    </div>
</template>

<script>
    import { searchColumns, tableActions, tableSchema } from '${modalDataPath}';
    import {
        ${fetchApiMethod},
        ${updateStatusApiMethod},
    } from '${apiPath}';
    export default {
        name: '${name}',
        dicts: [],
        components: { },
        data() {
            return {
                // 选中数组
                ids: [],
                // 总条数
                total: 0,
                // 弹出层标题
                title: '',
                // 多选框选中
                selecteds: [],
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
                columns: searchColumns(this),
                tableSchema: tableSchema,
                tableActions: tableActions(this.handleUpdate, this.handleStatusChange, this.handleShowDetail),
                tableProp: {},
                tableEvent: {
                    'selection-change': (selection) => {
                        this.selecteds = selection.map((item) => item.id);
                    },
                },
                // 查询参数
                queryParams: {},
                // 初始化下拉框备选数据列表
                <#list searchColumns as col>
                <#if (col.type == 'select')>
                ${col.name}List: [],
                </#if>
                </#list>
            };
        },
        mounted() {
            // 下拉框列表数据获取方法调用
            <#list searchColumns as col>
            <#if (col.type == 'select')>
            this.get${col.name}List();
            </#if>
            </#list>
            this.$refs.vBasicSearchForm.search();
        },
        methods: {
            ${fetchApiMethod},
            serach(form) {
                this.queryParams = { ...form };
                this.$refs.vBasicTable.fetch();
            },
            beforeFetch(params) {
                let query = {
                    ...this.queryParams,
                    createBeginTime:
                        (this.queryParams.date?.[0] && dayjs(this.queryParams.date[0]).format('YYYY-MM-DD')) ||
                        null,
                    createEndTime:
                        (this.queryParams.date?.[0] && dayjs(this.queryParams.date[1]).format('YYYY-MM-DD')) ||
                        null,
                };
                delete query.date;
                return query;
            },
            // 初始化下拉框列表数据获取方法
            <#list searchColumns as col>
            <#if (col.type == 'select')>
            get${col.name}List() {

            },
            </#if>
            </#list>
            // 展示详情
            handleShowDetail(row) {
                // this.form.id = row.id;
                // this.$router.push({ name: 'CompanyAuthDetail', query: { id: row.id } });
            },
            // 添加企业
            handleAdd() {},
            // 编辑企业
            handleUpdate(row) {},
            // 企业状态修改
            handleStatusChange(row) {
                let text = row.status === 0 ? '恢复' : '禁用';
                this.$modal
                    .confirm(`确认执行此操作吗？`)
                    .then(() => {
                        return ${updateStatusApiMethod}([row.id], row.status === 0 ? 1 : 0).then((res) => {
                            if (res.code == 200) {
                                this.$modal.msgSuccess(text + '成功');
                                this.$refs.vBasicSearchForm.search();
                            }
                        });
                    })
                    .catch(() => {});
            },
            // 批量修改禁用恢复
            handleBatchStatusChange(status) {
                console.log(this.selecteds);
                let text = status === 0 ? '批量恢复' : '批量禁用';
                this.$modal
                    .confirm(`确认执行此操作吗？`)
                    .then(() => {
                        ${updateStatusApiMethod}(this.selecteds, status === 0 ? 1 : 0).then((res) => {
                            if (res.code == 200) {
                                this.$modal.msgSuccess(text + '成功');
                                this.$refs.vBasicSearchForm.search();
                            }
                        });
                    })
                    .catch(() => {});
            },
            // 导出按钮操作
            handleExport() {
                this.download('${exportApiUrl}',{ ...this.queryParams, }, `${title}.xlsx` );
            },
        },
    };
</script>
<style lang="scss" scoped>
    .danger {
        color: #f56c6c;
    }

    .warning {
        color: #e6a23c;
    }
</style>
